<template>
  <div>
    <NavBar :title="title" />
    <div class="content-top">
      <!-- 问答列表 start -->
      <div class="quiz-list">
        <p class="item" v-for="(item, index) in list" :key="index">
          <span>{{ item.Ask }}</span>
          <span>{{ item.Answer }}</span>
          <span>{{ $dayjs(item.AnswerDate).format("YYYY-MM-DD") }}</span>
        </p>
      </div>
      <!-- 问答列表 end -->
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";

export default {
  name: "AskList",
  components: {
    NavBar,
  },
  props: ["list", "title"],
};
</script>

<style scoped>
/* 问企业 */
.quiz-list {
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
}

.quiz-list .item {
  display: flex;
  flex-direction: column;
  padding: 15px 15px 13px;
  border-radius: 10px;
  background-color: #fff;
}

.quiz-list .item + .item {
  margin-top: 10px;
}

.quiz-list .item span:nth-child(1),
.quiz-list .item span:nth-child(2) {
  padding-left: 28px;
  font-size: 15px;
}

.quiz-list .item span:nth-child(1) {
  background: url("@/assets/img/home/question-ico.png") no-repeat left 2px /
    20px;
  font-weight: 500;
  color: #333;
}

.quiz-list .item span:nth-child(2) {
  margin: 8px 0;
  background: url("@/assets/img/home/answer-ico.png") no-repeat left 2px / 20px;
  color: #666;
}

.quiz-list .item span:nth-child(3) {
  padding-left: 28px;
  font-size: 13px;
  color: #bbb;
}
</style>